design-patterns-nuxt/pages/details/[id].vue

<template>
  <section class="flex flex-col items-center min-h-screen">
    <div class="container w-full p-6 max-w-6xl grow flex flex-col items-center bg-slate-300">
      <NuxtLink class="w-full m-4 flex justify-end" :to="'/'">
        <uiClose />
      </NuxtLink>
      <img class="rounded-lg mb-6" :src="config.public.IMG_BASE_URL + film?.poster_path" :alt="film?.title">

      <div class="poster flex flex-col lg:flex-row w-full justify-center">
        <span>
          <h1 class="text-4xl font-bold leading-relaxed">
            {{ film?.title }}
          </h1>
          <h2 class="text-2xl text-slate-700">
            {{ director }}
          </h2>
          <p class="my-8">
            {{ film?.overview }}
          </p>
          <p>
            {{ formatPercent(film?.vote_average as number) }} %
          </p>
          <p>
            {{ film?.vote_count }} votes
          </p>
          <div class="flex justify-center">
            <ul class="flex items-center overflow-y-hidden overflow-x-scroll w-full max-w-lg">
              <li v-for="star in film?.credits.cast" class="flex flex-col items-center p-4 bg-slate-200 rounded m-4">
                <UiPerson class="h-10" />
                {{ star.name }}
              </li>
            </ul>
          </div>
          <ul class="flex">
            <li v-for="genre in film?.genres" class="p-8"> {{ genre.name }} </li>
          </ul>
        </span>
      </div>
      <div>
        <CommentForm :filmId="film?.id" />
        <CommentList :filmId="film?.id" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()

interface FilmDetails {
  title: string,
  id: number,
  poster_path: string,
  release_date: number,
  vote_average: number,
  vote_count: number,
  genres: genre[],
  overview: string,
  credits: Credits,
}

interface genre {
  id: number,
  name: string,
}

interface Credits {
  id: string,
  cast: Cast[],
  crew: Crew[],
}

interface Cast {
  adult: boolean,
  gender: number,
  id: number,
  known_for_department: string,
  name: string,
  original_name: string,
  popularity: number,
  profile_path: string,
  cast_id: number,
  character: string,
  credit_id: string,
  order: number,
}

interface Crew {
  adult: boolean,
  gender: number,
  id: number,
  known_for_department: string,
  name: string,
  original_name: string,
  popularity: number,
  profile_path: string | null,
  credit_id: string,
  department: string,
  job: string,
}

const film: Ref<FilmDetails | null> = ref(null)
const filmId: Ref<string> = ref('')
const director: Ref<string> = ref('')

filmId.value = route.params.id as string

if (filmId.value !== '') {
  const { data } = await useFetch(`/api/details/${filmId.value}`)
  film.value = data.value as FilmDetails
  const dataDirector = film.value.credits.crew.filter((member) => member.job === 'Director')
  director.value = dataDirector[0].name
}

onMounted(() => {
  window.scrollTo(0, 0)
})
</script>